<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mask alignment</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">


<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element.js"></script>

<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>

<style type="text/css">
.yui-pb {
	height:111px;
	width:111px;
}
.yui-pb-mask div {
	background-image: url(BnW.gif);
}
.yui-pb-bar {
	background-color:magenta;
}



#pb1 .yui-pb-mask div {
	position:static;
}

#pb1 .yui-pb-tl {
	background-position: top left;
	float:left;
}
#pb1 .yui-pb-tr {
	background-position: top right;
	float:left;
}
#pb1 .yui-pb-bl {
	background-position: bottom left;
	clear:both;
	float:left;
}
#pb1 .yui-pb-br {
	background-position: bottom right;
	float:left;
}

#pb2 .yui-pb-tl {
	background-position: top left;
	float:left;
}
#pb2 .yui-pb-tr {
	background-position: top right;
	float:right;
}
#pb2 .yui-pb-bl {
	background-position: bottom left;
	clear:both;
	float:left;
}
#pb2 .yui-pb-br {
	background-position: bottom right;
	float:right;
}


#pb3 .yui-pb-mask {
	margin:0;
}

#pb3 .yui-pb-mask td {
	background-image: url(BnW.gif);
}

#pb3 .yui-pb-mask td {
	width:50%;
	height:50%;
	background-repeat:no-repeat;
	border:0;
	padding:0;
}

#pb3 .yui-pb-tl {
	background-position: top left;
}
#pb3 .yui-pb-tr {
	background-position: top right;
}
#pb3 .yui-pb-bl {
	background-position: bottom left;
}
#pb3 .yui-pb-br {
	background-position: bottom right;
}
</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<input id="newValue" value="50" maxlength="3" size="3" /><button id="setValue">Set</button>
		</div>
		<div id="bd">
			<div style="border:1px solid black;width:109px;height:110px"></div>
			<div id="pb"></div>
			<hr />
			<div id="pb1"></div>
			<hr />
			<div id="pb2"></div>
			<hr />
			<div id="pb3"></div>
		</div>
	</div>
	
<script  type="text/javascript">
	var Dom = YAHOO.util.Dom, 
		Event = YAHOO.util.Event,
		pb;

	YAHOO.util.Event.onAvailable('pb', function () {
		
		
		var pb = new YAHOO.widget.ProgressBar({value:100});
		pb.render('pb');
		
		var pb1 = new YAHOO.widget.ProgressBar({value:100});
		pb1.render('pb1');
		
		var pb2 = new YAHOO.widget.ProgressBar({value:100});
		pb2.render('pb2');
		
		var Prog = YAHOO.widget.ProgressBar;
		Prog.MARKUP = [
			'<div class="',
			Prog.CLASS_BAR,
			'"></div><div class="',
			Prog.CLASS_CAPTION,
			'"></div><table class="',
			Prog.CLASS_MASK,
			'"><tbody><tr><td class="',
			Prog.CLASS_TL,
			'"></td><td class="',
			Prog.CLASS_TR,
			'"></td></tr><tr><td class="',
			Prog.CLASS_BL,
			'"></td><td class="',
			Prog.CLASS_BR,
			'"></td></tr></tbody></table>'
		].join('');

		var pb3 = new YAHOO.widget.ProgressBar({value:100});
		pb3.render('pb3');

		Event.on('setValue','click',function() {
			var newValue = parseInt(Dom.get('newValue').value,10);
			pb.set('value',newValue);
			pb1.set('value',newValue);
			pb2.set('value',newValue);
			pb3.set('value',newValue);
		});
	});
</script>
</body>
</html>
	
